@use "utils/functions";

.popover {
    padding: 0;
    border-radius: var(--radius-s);
    background: var(--center-channel-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    color: var(--center-channel-color);
    font-family: inherit;

    .app__body & {
        border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    &.bottom,
    &.right,
    &.top,
    &.left {
        > .arrow {
            display: none;

            &::after {
                border-color: transparent;
            }
        }
    }

    &.bottom {
        margin-top: 10px;

        > .arrow {
            &::after {
                border-bottom-color: var(--center-channel-bg);
            }
        }
    }

    &.left {
        > .arrow {
            &::after {
                border-left-color: var(--center-channel-bg);
            }
        }
    }

    &.right {
        > .arrow {
            &::after {
                border-right-color: var(--center-channel-bg);
            }
        }
    }

    &.top {
        > .arrow {
            &::after {
                border-top-color: var(--center-channel-bg);
            }
        }
    }

    ul + p,
    ol + p {
        margin-top: 0.6em;
    }

    p + ul,
    p + ol {
        margin-top: 0.6em;
    }

    blockquote {
        overflow: hidden;
        padding: 0 0 0 20px;
        font-size: 13px;
        text-overflow: ellipsis;

        &::before {
            top: 0;
            left: 2px;
            font-size: 15px;
        }
    }

    .popover-title {
        overflow: hidden;
        max-width: 100%;
        padding: 12px 12px 0;
        border-color: var(--center-channel-bg);
        background: none;
        text-overflow: ellipsis;

        > span {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    hr {
        &.divider {
            margin: 8px 0;
        }

        &.divider--expanded {
            border-color: rgba(var(--center-channel-color-rgb), 0.08);
            margin: 8px -15px;
        }
    }

    .popover-content {
        word-break: break-word;

        p {
            &:last-child {
                margin-bottom: 5px;
            }
        }
    }

    .popover__row {
        padding: 9px 15px 0;
        margin: 0 -15px 0;

        &.first {
            border-top: 1px solid transparent;
            margin-top: 4px;
        }

        > a,
        > button {
            i {
                margin-right: 5px;
            }
        }
    }
}

.user-popover {
    display: inline-block;
    cursor: pointer;
}

.code-popover {
    .popover-content {
        padding: 5px;
    }
}

.search-autocomplete__name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-help-popover {
    top: 25px;
    right: 0;
    left: auto;
    width: 296px;
    max-width: 350px;
    opacity: 0;
    visibility: hidden;

    &.autocomplete {
        display: block;

        .popover-content {
            position: relative;
            max-height: 60vh;
            padding: 0 0 12px;
            -webkit-overflow-scrolling: touch;
            overflow-x: hidden;

            &::-webkit-scrollbar-track {
                width: 0;
            }

            &::-webkit-scrollbar-thumb {
                border: 1px solid functions.v(center-channel-bg);
                border-radius: 4px;
                background-color: rgba(var(--center-channel-color-rgb), 0.24) !important;
            }

            .rdp-months {
                justify-content: center;

                .rdp-caption,
                .rdp-cell {
                    padding: 0 10px;
                }
            }
        }
    }

    &.bottom > .arrow {
        top: -18px;
        left: 30px;
        border-width: 9px;
    }

    .popover-content {
        overflow: auto;
        max-height: 500px;
        padding: 0;
    }

    h4 {
        margin-top: 0;
        font-size: 1.4rem;
    }

    ul[role="group"] {
        // Undo padding and margins added by Bootstrap and our design system
        padding: 0;
        margin: 0;
    }

    .tooltip-inner {
        max-width: 100%;
    }

    body.enable-animations & {
        transition-delay: 0s;
        transition-duration: 0.1s;
        transition-property: opacity, visibility;
        transition-timing-function: ease-in, step-end;
    }

    &.visible {
        opacity: 1;
        visibility: visible;

        body.enable-animations & {
            transition-delay: 0.2s;
            transition-duration: 0.3s;
            transition-property: opacity, visibility;
            transition-timing-function: ease-out, step-start;
        }

        body.enable-animations .sidebar--right & {
            transition-delay: 0s;
            transition-duration: 0.3s;
            transition-property: opacity, visibility;
            transition-timing-function: ease-out, step-start;
        }
    }
}

.channel_search {
    display: flex;

    .search_input {
        flex: 1;
        margin-right: 16px;
        margin-left: 16px;
    }

    .create_button {
        margin-right: 16px;
    }
}
